<template>
  <div id="userInfoView">
    <a-form
      ref="formRef"
      :size="form.size"
      :model="form"
      :style="{ width: '600px' }"
    >
      <h1>个人信息</h1>
      <a-form-item field="size" label="表单尺寸">
        <a-radio-group v-model="form.size" type="button">
          <a-radio value="mini">迷你</a-radio>
          <a-radio value="small">小</a-radio>
          <a-radio value="medium">中</a-radio>
          <a-radio value="large">大</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="userName"
        label="用户名"
        :rules="[
          { required: true, message: 'name is required' },
          { minLength: 5, message: 'must be greater than 5 characters' },
        ]"
        :validate-trigger="['change', 'input']"
      >
        <a-input v-model="form.userName" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item
        field="userOldPassword"
        label="旧密码"
        :rules="[
          { required: true, message: 'age is required' },
          { type: 'number', max: 200, message: 'age is max than 200' },
        ]"
      >
        <a-input-password
          v-model="form.oldPassword"
          placeholder="请输入旧密码"
        />
      </a-form-item>
      <a-form-item
        field="userNewPassword"
        label="新密码"
        :rules="[{ type: 'number', max: 200, message: 'age is max than 200' }]"
      >
        <a-input-password
          v-model="form.newPassword"
          placeholder="请输入新密码"
        />
      </a-form-item>
      <a-form-item
        field="userCheckPassword"
        label="确认密码"
        :rules="[{ type: 'number', max: 200, message: 'age is max than 200' }]"
      >
        <a-input-password
          v-model="form.checkPassword"
          placeholder="再次确认密码"
        />
      </a-form-item>
      <a-form-item field="userProfile" label="简介">
        <a-textarea default-value="请简单介绍自己" auto-size />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="doBack">返回</a-button>
          <a-button type="primary">更新</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const form = reactive({});
const doBack = () => {
  router.back();
};

onMounted(() => {
  Object.assign(form, store.state.user?.loginUser);
});
</script>

<style scoped>
#userInfoView {
  margin-left: 280px;
}
</style>
